﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link rel="stylesheet" href="../../css/mui.plus.css" />
    <link rel="stylesheet" href="../../css/photoswipe.css"/>
	<link rel="stylesheet" href="../../css/default-skin/default-skin.css" />
    <style>
    	.mui-grid-view.mui-grid-9 .mui-table-view-cell,.mui-grid-view.mui-grid-9 {
        	border: none;
        } 
        .oe-img-add {
        	width: 25vw;
        	height: 25vw;
        	background: none;
        }
        .mui-grid-view.mui-grid-9 {
        	white-space: nowrap;
        	overflow-x: auto;
        }
    </style>
    
</head>
<body>

    <header class="mui-bar mui-bar-nav pri-bar">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">随访详情</h1>
        <a href="###" class="mui-pull-right" style="padding-top: 11px;" id="btnSave">保存</a>
    </header>

    <div class="mui-content">
		
    </div>
    
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
	<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
	
	    <!-- Background of PhotoSwipe. 
	         It's a separate element, as animating opacity is faster than rgba(). -->
	    <div class="pswp__bg"></div>
	
	    <!-- Slides wrapper with overflow:hidden. -->
	    <div class="pswp__scroll-wrap">
	
	        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
	        <div class="pswp__container">
	            <!-- don't modify these 3 pswp__item elements, data is added later on -->
	            <div class="pswp__item"></div>
	            <div class="pswp__item"></div>
	            <div class="pswp__item"></div>
	        </div>
	
	        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
	        <div class="pswp__ui pswp__ui--hidden">
	
	            <div class="pswp__top-bar">
	
	                <!--  Controls are self-explanatory. Order can be changed. -->
	
	                <div class="pswp__counter"></div>
	
	                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
	
	                <!-- <button class="pswp__button pswp__button--share" title="Share"></button> -->
	
	                <!-- <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> -->
	
	                <!-- <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> -->
	
	                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
	                <!-- element will get class pswp__preloader--active when preloader is running -->
	                <div class="pswp__preloader">
	                    <div class="pswp__preloader__icn">
	                      <div class="pswp__preloader__cut">
	                        <div class="pswp__preloader__donut"></div>
	                      </div>
	                    </div>
	                </div>
	            </div>
	
	            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
	                <div class="pswp__share-tooltip"></div> 
	            </div>
	
	            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
	            </button>
	
	            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
	            </button>
	
	            <div class="pswp__caption">
	                <div class="pswp__caption__center"></div>
	            </div>
	
	          </div>
	
	        </div>
	
	</div>

    <script src="../../js/mui.min.js"></script>
    <script src="../../js/app.js"></script>
    <script src="../../js/lib/template.js"></script>
    <script src="../../js/lib/photoswipe.min.js"></script>
	<script src="../../js/lib/photoswipe-ui-default.min.js"></script>
    <script id="page" type="text/html">
		{{each list as v i}}
			<ul class="mui-table-view">
	            <li class="mui-table-view-cell">
	                <span>{{v.node}}</span>
	                <span style="font-size: 12px;color:#999;">{{v.post_surgery_date}}</span>
	            </li>
	        </ul>
	
	        <div class="oe-divide-block"></div>
	
	        <div style="background-color: #fff;padding: 15px;">术后影像</div>
	        <ul id="imgList" class="mui-table-view mui-grid-view mui-grid-9" style="background-color: #fff;">
	            
	        </ul>
	
	        <div class="oe-divide-block"></div>
	        
	        <div style="background-color: #fff;padding: 15px;">
		       		患者备注
		        <div id="pa-remark" style="padding-top: 10px;color: #666;text-indent: 2em;">暂无</div>
		    </div>
		    
		    <div class="oe-divide-block"></div>
	
	        <div style="background-color: #fff;padding: 15px;">
	            医生反馈
	            <textarea name="" id="txtContent" rows="10" style="padding-left: 0;color: #999;text-indent: 2em;" placeholder="输入反馈">待反馈</textarea>
	        </div>
        {{/each}}
	</script>
	<script  id="img-list" type="text/html">
		{{each data as v i}}
			<figure class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	            <a href="{{v.spp_src}}" data-size = "{{v.spp_width}}x{{v.spp_height}}">
	                <img class="oe-img-add" src="{{v.spp_src}}?imageMogr2/strip|imageView2/4/w/150/h/150"></img>
	            </a>
	        </figure>
		{{/each}}
	</script>
    <script> 
        (function ($, doc) {
            $.plusReady(function () {
                var txtContent;
                var oldObj = {},
                	data = {
                		list : []
                	};
                var idList = {};
                var spfb_node_month;
                var paRemark;
                
                
                window.addEventListener("subInterview", function (event) {
                    data.list[0] = oldObj = event.detail;
                    
                    var html = template('page', data);
                    document.getElementsByClassName('mui-content')[0].innerHTML = html;
                    txtContent = document.getElementById("txtContent");
                    paRemark = document.getElementById("pa-remark")
                    
                    idList = {
                    	rec_id : oldObj.rec_id,
                    	fo_id : oldObj.fo_id,
                    	node_month : oldObj.node.replace(/[^0-9]+/g, '')
                    }
                    
                    app.net.get('c_surgery_post_pic_feedback/show', {spfb_fo_id: oldObj.fo_id, spfb_node_month: oldObj.node.replace(/[^0-9]+/g, '')}, function(data){
						if(data && data.code == 100){
							for(var i in data.data){
                    		if(/id/.test(i) == true){
	                    			idList[i] = data.data[i];
	                    		}
	                    	}
							txtContent.innerHTML = data.data.spfb_text;
	                    	spfb_node_month = data.data.spfb_node_month;
							document.getElementById("btnSave").innerHTML = '更新';
						}else if(data && data.code == 300){
							document.getElementById("btnSave").innerHTML = '保存';
						}
                    });
                    
                    app.net.get('c_surgery_post_pic/show_list_by_node',{rec_id: idList.rec_id, node_month: idList.node_month},function(data){
                    	if(data && data.code == 100){
                    		var tempData = data;
                    		var html = template('img-list', tempData);
                    		document.getElementById("imgList").innerHTML = html;
                    		
                    		app.img.initPhotoSwipeFromDOM('#imgList');
                    	}
                    });
                    
                    var remarkInfo = {
                    	sprk_fo_id: idList.fo_id,
                    	sprk_node_month: idList.node_month
                    };
                	app.net.get('c_surgery_post_pic_remark/show', remarkInfo, function(data){
                    	if(data && data.code === '100'){
                    		paRemark.innerHTML = data.data.sprk_text;
                    	}
                    });
                    
                });
                
                // 保存/更新按钮
                $('body').on('tap', '#btnSave', function(){
                	var self = this;
                	if(!txtContent.value){
                		plus.nativeUI.toast('您还尚未进行任何反馈哦');
                		return;
                	};
                	if(self.innerHTML == '更新'){
                		var info = {
                			spfb_id : idList.spfb_id,
                			spfb_text : txtContent.value
                		};
                		
                		app.net.post('c_surgery_post_pic_feedback/update', info, function(data){
                			if(data && data.code == 100){
                				plus.nativeUI.toast('更新成功');
                			}else if(data && data.code == 400){
                				plus.nativeUI.toast('您没有进行任何修改哦O(∩_∩)O~~');
                			}
                		});
                	}else if(self.innerHTML == '保存'){
                		var info = {
                			spfb_rec_id : idList.rec_id,
                			spfb_fo_id : idList.fo_id,
                			spfb_text : txtContent.value,
                			spfb_node_month : idList.node_month
                		};
                		
                		app.net.ajax('c_surgery_post_pic_feedback/create', info, 'post', function(data){
                			if(data && data.code == 100){
                				plus.nativeUI.toast('保存成功');
                				self.innerHTML = '更新';
                			}else {
                				plus.nativeUI.toast('保存失败');
                			}
                		});
                		
                	}
                });
                
//              $('.mui-content').on('tap', '.oe-img-add', function(){
//              	var src = this.src;
//              	$.openWindow({
//              		url : 'photo-detail.html',
//              		waiting : {
//              			autoShow : false
//              		},
//              		extras : {
//              			src : src
//              		}
//              	});
//              });
				
            });
        }(mui, document));
    </script>
</body>
</html>